<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1 @click="message='hello 前端开发'">{{message}}</h1>
    <h1 @click="changePerson">{{person}}</h1>
    <h1 @click="changeArrar">{{arr}}</h1>
  </div>
  <script src="../../javascript//vue.js"></script>
  <script>
    /* 
    数组更新检测
        变更方法
        Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
        push()
        pop()
        shift()
        unshift()
        splice()
        sort()
        reverse()
      变更方法会变更调用了这些方法的原始数组。
      非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：
      example1.items = example1.items.filter(function (item) {
        return item.message.match(/Foo/)
      })  
    */
    const vm = new Vue({
      el: "#app",
      data() {
        return {
          message: "Hello Vue",
          person: {
            name: "陶品奇",
            age: 22,
          },
          arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        }
      },
      methods: {
        changePerson() {
          //delete this.person.age 视图不更新
          this.$delete(this.person, "name")
          this.$set(this.person, "age")
        },
        changeArrar() {
          // this.arr[0]=1000 视图不更新
          this.$set(this.arr, 1, "helloVue")
          this.arr.push(1000)
        }
      }
    })
  </script>
</body>

</html>